<template>
  <div class="main">
    <div class="left">
      <studentMainleft></studentMainleft>
    </div>
    <div class="right">
      <template>
        <el-table :data="applicationTable" style="width: 100%" @row-click="rowclick">
          <el-table-column prop="ApplicantsId" label="申请人学号" width="180"></el-table-column>
          <el-table-column prop="ApplicationType" label="申请类型" width="180"></el-table-column>
          <el-table-column prop="ByTheTime" label="申请时间"></el-table-column>
        </el-table>
        <el-drawer title="审批详情" :visible.sync="drawer" :direction="direction" size="40%">
          <div class="personInfo">
            <!-- <el-descriptions title="个人信息" :column="1">
              <el-descriptions-item label="姓名">{{stuInfo.StuName}}</el-descriptions-item>
              <el-descriptions-item label="学号">{{stuInfo.StuId}}</el-descriptions-item>
              <el-descriptions-item label="手机号">{{stuInfo.StuPhone}}</el-descriptions-item>
              <el-descriptions-item label="性别">{{stuInfo.StuSex}}</el-descriptions-item>
              <el-descriptions-item label="年龄">{{stuInfo.StuAge}}</el-descriptions-item>
              <el-descriptions-item label="入学时间">{{stuInfo.StubackTime}}</el-descriptions-item>
              <el-descriptions-item label="邮箱">{{stuInfo.StuEmail}}</el-descriptions-item>
              <el-descriptions-item label="籍贯">{{stuInfo.NativePlace}}</el-descriptions-item>
              <el-descriptions-item label="政治面貌">{{stuInfo.PoliticalLandscape}}</el-descriptions-item>
              <el-descriptions-item label="民族">{{stuInfo.National}}</el-descriptions-item>
              <el-descriptions-item label="专业">{{stuInfo.ProfessionalName }}</el-descriptions-item>
              <el-descriptions-item label="学院">{{stuInfo.CollegeName}}</el-descriptions-item>
            </el-descriptions> -->
          </div>
        </el-drawer>
      </template>
    </div>
  </div>
</template>

<script>
import studentMainleft from "@/components/studentMainleft";
export default {
  components: {
    studentMainleft
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      user: null,
      applicationTable: [],
      stuInfo: null
    };
  },
  created() {
    this.GetStudentApplicationFormByWorkerToken();
  },
  mounted() {},
  methods: {
    rowclick(row, column, event) {
console.log(JSON.parse(row.InfoJson));
      this.stuInfo = JSON.parse(row[0].InfoJson);
      this.drawer = true;
    },
    GetStudentApplicationFormByWorkerToken() {
      this.user = JSON.parse(sessionStorage.getItem("user"));
      this.$axios({
        method: "get",
        url: this.$api.GetStudentApplicationFormByWorkerToken,
        params: {
          token: this.user.Token,
          classId: this.user.ClassId
        }
      }).then(res => {
        console.log(res);
        this.applicationTable = res.data.message;
      });
    }
  }
};
</script>

<style scoped>
.main {
  display: flex;
  height: 100%;
}
.right {
  width: 100%;
  background-color: white;
  height: 80%;
  margin-left: 10px;
}
.personInfo{
  margin: 30px
}
</style>
